import React from 'react';
import { Balloon, Loading } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import PropTypes from 'prop-types';

const { Tooltip } = Balloon;

export default class SelectMenu extends React.Component {
  static propTypes = {
    selectValue: PropTypes.number,
    data: PropTypes.arrayOf(PropTypes.object),
    onChange: PropTypes.func,
    isOverlayLoading: false,
  };

  static defaultProps = {
    selectValue: 0,
    data: [],
    onChange: () => {},
  };

  selectContainer = React.createRef();

  highlightTimer = null;

  componentDidUpdate(prevProps) {
    if (this.props.highlightKey !== null && prevProps.highlightKey !== this.props.highlightKey) {
      clearTimeout(this.highlightTimer);
      this.highlightTimer = setTimeout(() => {
        try {
          const menuNode = this.selectContainer.current;
          const itemNode = menuNode.querySelector('.visible-select-item.hover');
          itemNode && itemNode.scrollIntoViewIfNeeded();
        } catch (ex) {
          console.error(ex);
        }
      });
    }
  }

  componentWillUnmount() {
    clearTimeout(this.highlightTimer);
  }

  render() {
    const { data, selectValue, isOverlayLoading, highlightKey } = this.props;
    return (
      <div className="select-pop-container" ref={this.selectContainer}>
        {isOverlayLoading && (
          <div className="access-select-loading">
            <Loading />
          </div>
        )}
        {!isOverlayLoading &&
          data &&
          data.map((item) => {
            if (item.disabled) {
              return (
                <Tooltip
                  trigger={
                    <div className="visible-select-item" style={{ cursor: 'not-allowed' }}>
                      <div className="visible-select-item-right">
                        {selectValue === item.value ? (
                          <YunxiaoIcon type="true-line" style={{ color: 'rgb(0, 108, 250)' }} />
                        ) : null}
                      </div>
                      <div className="visible-select-item-left">
                        <div className="select-label disabled">{item.title}</div>
                        <div className="select-des disabled">{item.des}</div>
                      </div>
                    </div>
                  }
                  align="t"
                >
                  {item.tip}
                </Tooltip>
              );
            }
            return (
              <div
                className={`visible-select-item ${highlightKey === item.value ? 'hover' : ''}`}
                onClick={() => {
                  if (item.disabled) {
                    return;
                  }
                  this.props.onChange(item);
                }}
              >
                <div className="visible-select-item-right">
                  {selectValue === item.value ? (
                    <YunxiaoIcon type="true-line" className="select-icon" />
                  ) : null}
                </div>
                <div className="visible-select-item-left">
                  <div className="select-label">{item.title}</div>
                  <div className="select-des">{item.des}</div>
                </div>
              </div>
            );
          })}
      </div>
    );
  }
}
